<template>
  <view class="container">
    <!-- Popup Overlay -->
    <view class="popup-overlay" v-if="isPopupVisible">
      <!-- Popup Content -->
      <image class="popup-bind" :class="{ 'shrink-animation-bind': isShrinking, 'tilt-shake-animation': !isShrinking }"
        :src="'https://td.lszbg.com/public/uploads/h5/home/Maxk-group2.png'" mode="aspectFill" >
        <!--@click.stop="openlogin"-->
      </image>
      <view class="popup-moeny u-flex">
        <view class="money-amount u-flex" style="flex: 1;align-items: center;justify-content: center">
          <text class="amount">{{improveCash}}</text>
          <text class="unit">元</text>
        </view>
        <view class="money-amount u-flex" style="flex: 1;align-items: center;justify-content: center">
          <text class="amount">{{imporveFirst}}</text>
          <text class="unit">元</text>
        </view>

      </view>
      <!--微信授权手机号按钮-->
      <view class="getPhoneBtn" >
        <button class="wechat-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
      </view>
      <!-- 删除按钮 -->
      <view class="delet-icon-bind" @click="startCloseAnimation()">
        <u-icon name="close-circle" color="#FFFFFF" size="50"></u-icon>
        <!--<image src="http://yyadmin.laimeitong.com/images/delet.png"></image>-->
      </view>

    </view>
  </view>
</template>

<script>
const app = getApp();
import newUserRewardApi from '@/api/newUserReward.js'
Page({
  getPhoneNumber: function(e) {
    console.log(e.detail.errMsg);
    console.log(e.detail.iv);
    console.log(e.detail.encryptedData);
    // 将加密数据和IV发送到服务器进行解密
  }
});
export default {
  name: "effect-bind",
  data() {
    return {
      isPopupVisible: false, // Controls popup visibility
      isShrinking: false, // Controls shrinking animation
      BestImgUrl: app.globalData.imgurl,
      improveCash: '', //完善信息-现金红包
      imporveFirst: '', //完善信息-首单红包
    };
  },
  mounted() {
    this.ImproveUser()
  },
  methods: {
    // 获取用户完善信息内容
    ImproveUser() {
      newUserRewardApi.getImproveUserInfo().then(res => {
        const data = res.data.result;
        console.log("完善信息=",data)
        this.improveCash = Math.floor(data[1].amount);
        this.imporveFirst = Math.floor(data[2].amount);
      }).catch(err => {

      })
    },
    // Show popup
    showPopup() {
      this.isPopupVisible = true;
      this.isShrinking = false;
    },
    getPhoneNumber(e){
      console.log('用户信息==',e.detail)
      this.$api.getWXPhoneNumber({
        code: e.detail.code,
        encryptedData: e.detail.encryptedData
      }).then(res => {
        console.log('获取用户信息', res)
        uni.showToast({title:'手机号绑定成功！',icon:'success'})
        setTimeout(() => {
          this.startCloseAnimation(() => {
            this.$emit('close');
          })
        }, 2000)

      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 2000
        })
      })
    },
    // 绑定手机号
   /* openlogin() {
      //console.log('获取用户信息==', uni.getStorageSync('userinfo'), 'token信息==',uni.getStorageSync('token'))


      this.startCloseAnimation(() => {
        this.$emit('close');
      })
    },*/
    // Start closing animation and shrink the popup
    startCloseAnimation(fn) {
      this.isShrinking = true;

      // Wait for the animation to complete before fully hiding the popup
      setTimeout(() => {
        this.isPopupVisible = false;
        this.isShrinking = false;
        if (fn) {
          fn()
        }
      }, 550); // Match the animation duration in CSS
    },
  },
};
</script>

<style scoped lang="scss">
@import "./css/index-xg.css";
//微信授权手机按钮css
.getPhoneBtn {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  .wechat-btn {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
  }
}
</style>